<template>
	<view class="observe-content">

		<view class="observe-top">
			<rf-navbar :title="'孩子转交'" @click="onBack"></rf-navbar>
			<view class="top-select" @click="onClickHistory">转交历史</view>
		</view>
		<view class="observe-bottom" v-if="data.length>0">
			<u-checkbox-group v-model="checkboxValue1" placement="column" :iconSize="21">
				<u-index-list :index-list="data.map(item => item.code)" customNavHeight="126" bottom="90">

					<template v-for="(item, index) in data">
						<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
						<u-index-item>
							<u-index-anchor :text="data.map(item => item.code)[index]" bgColor="#F5F6FA"
								height="20"></u-index-anchor>
							<view class="list-cell" v-for="(cell, row) in item.list"
								@click="childDetails(cell.childId)">

								<u-checkbox :key="cell.childId" :name="cell.childId" activeColor="#58c866"
									@change="handleChange(cell.childId)"></u-checkbox>
								<view class="cell-image">
									<rf-avatar :avatarUrl="cell.headSculpture" :gender="cell.childSex"></rf-avatar>
								</view>

								<view class="cell-text">
									<view class="cell-text-top">
										{{ cell.childName }}
									</view>
									<view class="cell-text-bom">{{getChildAge(cell)}}</view>
								</view>
							</view>
						</u-index-item>
					</template>

				</u-index-list>
			</u-checkbox-group>
			<!-- <view class="add" @click="addChild"></view> -->
		</view>
		<!-- 数据为空页面 -->
		<view class="observe-bottom" v-else>
			<view
				style="background-color: #fff; width: 100%; height: 400px; display: flex; justify-content: center; align-items: center;">
				<u-empty mode="car" :marginTop="50" text="暂无数据" icon="/static/images/common/empty.png"></u-empty>
			</view>
		</view>
		<!-- 页脚 -->
		<view class="foot">
			<view class="container">
				<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1"
						:key="index" :label="item.name" :name="item.name"></u-checkbox>
				</u-checkbox-group> -->
				<u-checkbox activeColor="#58c866" :iconSize="21" :checked="isallcheck"
					@change="checkboxChange"></u-checkbox>
				<input class="input" placeholder="请输入被转交者ID" v-model="value" />
				<!-- <u--input class="input" placeholder="请输入优惠码" border="surround" v-model="value"></u--input> -->

				<view class="btn" @click="onClicked">确认转交</view>
			</view>
		</view>
		<rf-toast :show="show" :isSus="isSus" :title="title" :des="des"></rf-toast>
	</view>
</template>

<script>
	import {
		getTeacherInfo,
		getChildList,
		transferChild,
	} from "@/api/user.js"

	export default {
		data() {
			return {
				value: '',
				// 是否全选
				isallcheck: false,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '全选',
					disabled: false
				}],
				data: [],

				// 提示
				show: false,
				isSus: true,
				title: "",
				des: "",

				ageList: [
					[{
						'name': '全部',
						'value': "",
					}, {
						'name': '半岁',
						'value': "0.5",
					}, {
						'name': '一岁',
						'value': "1",
					}, {
						'name': '一岁半',
						'value': "1.5",
					}, {
						'name': '两岁',
						'value': "2",
					}, {
						'name': '两岁半',
						'value': "2.5",
					}, {
						'name': '三岁',
						'value': "3",
					}, {
						'name': '三岁半',
						'value': "3.5",
					}, {
						'name': '四岁',
						'value': "4",
					}, {
						'name': '四岁半',
						'value': "4.5",
					}, {
						'name': '五岁',
						'value': "5",
					}, {
						'name': '五岁半',
						'value': "5.5",
					}, {
						'name': '六岁',
						'value': "6",
					}, {
						'name': '六岁半',
						'value': "6.5",
					}, {
						'name': '七岁',
						'value': "7",
					}]
				],
			};
		},
		onLoad() {
			this.getKidList()
		},
		computed: {
			getChildAge() {
				return (val) => {

					for (let i = 0; i < this.ageList[0].length; i++) {
						if (this.ageList[0][i].value == val.childAge) {
							return this.ageList[0][i].name;
						}
					}
				}
			},
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			getKidList() {
				var params = {
					childSex: this.childSex,
					childAge: this.childAge,
					childName: ""
				}
				getChildList(params).then(res => {
					console.log("res: " + JSON.stringify(res));
					this.data = res.data
				})
			},
			checkboxChange() {
				this.isallcheck = !this.isallcheck;

				if (this.isallcheck) {
					this.data.forEach(item => {
						item.list.forEach(child => {
							this.checkboxValue1.push(child.childId);
						});
					});
					const array = [1, 2, 2, 3, 3, 4, 5, 5];
					this.checkboxValue1 = [...new Set(this.checkboxValue1)];
				} else {
					this.checkboxValue1.length = 0
				}


				console.log("this.checkboxChange1: " + JSON.stringify(this.checkboxValue1));
			},
			// 单选，取消全选
			handleChange(childId) {

				const isContained = this.checkboxValue1.includes(childId);
				if (isContained) {
					console.log("you ");
					this.isallcheck = false
				} else {
					console.log("meiyou ");
				}

			},
			// 转交孩子
			onClicked() {
				console.log("this.checkboxChange1: " + JSON.stringify(this.checkboxValue1));
				console.log("this.data: " + JSON.stringify(this.data));
				let _that = this
				// http://60.205.186.224:8090/api/teacher/transferChild?childList=0&teacherId=0
				var params = {
					childList: this.checkboxValue1,
					teacherId: this.value,
				}
				transferChild(params).then(res => {
					_that.title = "转交成功";
					_that.des = "已为您完成孩子转交";
					_that.isSus = true;
					_that.show = true;
					setTimeout(() => {
						_that.show = false;
					}, 2000)
				}).catch(err => {
					uni.showToast({
						icon: "none",
						title: err.message,
					});
				})
			},
			onClickHistory() {
				uni.navigateTo({
					url: "/pages-sub/transmit/transmitHistory"
				})
			},
			back() {
				uni.navigateBack();
			},
			// 点击选择性别
			sexClick() {
				this.showSex = true;
			},
			// 点击选择年龄
			ageClick() {
				this.showAge = true;
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
				// console.log('close');
			},
			sexSelect(e) {},
			ageSelect(e) {},
			// 添加孩子
			addChild() {
				uni.navigateTo({
					url: '/pages/addChild/addChild'
				});
			},
			// 孩子详情
			childDetails(childId) {
				// uni.navigateTo({
				// 	url: '/pages/childFile/childFile'
				// });

				const isContained = this.checkboxValue1.includes(childId);
				if (isContained) {
					this.checkboxValue1.pop(childId)
					// 是否全选
					this.isallcheck = false
				} else {
					this.checkboxValue1.push(childId)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-input__content {
		background-color: #f4f7f9;
		padding: 10rpx;
		border-radius: 50rpx;
		width: 400rpx;
	}

	::v-deep.uni-input-input:disabled {
		background-color: #f4f7f9;
	}

	::v-deep.u-form-item__body__right__content {
		background-color: #f4f7f9;
	}

	::v-deep.u-input {
		background-color: #f4f7f9;
	}

	::v-deep.u-border {
		border-color: #f4f7f9 !important;
	}

	::v-deep.u-form-item__body__left__content__label {
		margin: 0 0 14rpx 0;
		font-weight: 500;
		color: #000000;
		font-size: 32rpx;
	}

	.u-index-anchor {
		background-color: #f5f6fa !important;
	}

	.observe-content {
		min-height: calc(100vh);
		background-color: #fff;

		.observe-top {
			width: 100%;
			height: 126px;
			background: url('../../static/icons/toubu.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: fixed;
			z-index: 999;

			.back {
				position: absolute;
				left: 32rpx;
				top: 116rpx;
			}

			.top-text {
				// margin: 110rpx 326rpx 110rpx 328rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3a3d4b;
				position: absolute;
				top: 110rpx;
				left: 328rpx;
				// text-align: center;
				// line-height: 264rpx;
			}

			.top-select {
				display: flex;
				position: absolute;
				bottom: 28rpx;
				right: 32rpx;
				font-size: 28rpx;
				font-family: AppleSystemUIFont;
				font-weight: 600;
				color: #30bc42;

				.select-left {
					display: flex;

					.select-text {
						font-size: 28rpx;
						font-family: AppleSystemUIFont;
						color: #3a3d4b;
						margin-right: 20rpx;
					}

					.select-icon {
						color: #000;
						width: 18rpx;
						height: 11rpx;
						margin-top: 12rpx;
						margin-right: 110rpx;
					}
				}

				.select-right {
					display: flex;

					.select-text {
						font-size: 28rpx;
						font-family: AppleSystemUIFont;
						color: #3a3d4b;
						margin-right: 20rpx;
					}

					.select-icon {
						color: #000;
						width: 18rpx;
						height: 11rpx;
						margin-top: 12rpx;
						margin-right: 110rpx;
					}
				}
			}
		}

		.observe-bottom {
			background-color: #fff;
			position: relative;
			top: 126px;

			.list-cell {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 100%;
				height: 148rpx;
				padding: 20px 40rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 28rpx;
				background-color: #fff;

				.cell-image {
					width: 107rpx;
					height: 108rpx;
					background-repeat: no-repeat;
					background-size: 100%;
					margin-right: 24rpx;

					.cell-icon {
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}

				.cell-text {
					.cell-text-top {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #3a3d4b;
						margin-top: 8rpx;
					}

					.cell-text-bom {
						margin: 10rpx 0rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #77798d;
					}
				}
			}

		}

		.popup {
			width: 100%;
			height: 626rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
	}

	.foot {
		position: fixed;
		z-index: 999;
		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #ffffff;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.02), 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.02);


		.container {
			top: 0rpx;
			height: 112rpx;
			padding: 0rpx 32rpx;
			display: flex;
			align-items: center;

			.input {
				margin: 0rpx 0rpx 0rpx 32rpx;
				height: 88rpx;
				background-color: #F4F7F9;
				border-radius: 44rpx;
				padding: 0rpx 180rpx 0rpx 20rpx;
				flex: 2;
			}

			.btn {
				position: absolute;
				top: 16rpx;
				right: 36rpx;
				width: 174rpx;
				height: 80rpx;
				background: #58c866;
				border-radius: 44rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}
		}


	}
</style>